  @keyframes click
    0% 
      transform scale(1.4)
      opacity 0
    100%
      transform scale(1)
      opacity 1

.approveTokenSpendConfirm
  position absolute
  top 0px
  left 0px
  right 0px
  bottom 0px
  display flex
  justify-content center
  align-items center
  z-index 10
  animation click 400ms
  font-family 'MainFont'
  font-size 16px
  color var(--outerspace)
  text-transform uppercase 
  font-weight 300
  letter-spacing 1px

  div
    margin 3px

  .approveTokenSpendConfirmNumberText
    color var(--moon)  

.approveTokenSpendEditTitle
  font-weight 300
  font-size 12px
  margin-top 4px
  margin-left 2px
  text-transform uppercase
  letter-spacing 2px
  color var(--good)
  margin-bottom 10px
  text-align center

.approveTokenSpendPresets
  display flex
  justify-content center
  align-items center
  margin-right 10px

  .approveTokenSpendPresetButton
    display flex
    justify-content center
    align-items center
    height 25px
    border-radius 12px
    background var(--ghostD)
    margin 12px 0px 0px 10px
    cursor pointer
    padding 0px 15px 1px 16px
    font-size 12px
    text-transform uppercase
    font-weight 300
    box-sizing border-box
    letter-spacing 1px
    *
      pointer-events none

    .approveTokenSpendPresetButtonTilda
      font-size 15px
      position relative
      right 0px
      top 1px
      font-family 'FiraCode'
      display none

    .approveTokenSpendPresetButtonInfinity
      position relative
      top 1px
      right 0px

  .approveTokenSpendPresetButtonSelected
    color var(--good)

.approveTokenSpendDescription
  display flex
  justify-content center
  align-items center
  flex-direction column
  padding-top 40px
  padding-bottom 40px

  .approveTokenSpendSpender
    font-size 12px
    font-weight 400
    text-transform uppercase
    line-height 25px
    letter-spacing 1px
    margin 0px 2px 2px 2px

  .approveTokenSpendSpenderAddress
    font-size 20px
    font-family 'FiraCode'
    display flex
    justify-content center
    align-items center
    height 28px

    svg
      padding 5px

    .approveTokenSpendSpenderAddressFull
      font-size 13px
      display none
      cursor pointer

  .approveTokenSpendSpenderAddress:hover
    .approveTokenSpendSpenderAddressLarge
      display none
    .approveTokenSpendSpenderAddressFull
      display block

    
  .approveTokenSpendSub
    font-size 12px
    font-weight 300
    text-transform uppercase
    letter-spacing 1px
    margin 10px

  .approveTokenSpendToken
    font-size 18px
    height 30px
    display flex
    justify-content center
    align-items center
    flex-direction column
    width calc(100%)
    padding 0px 20px 2px 22px
    box-sizing border-box
    margin-top 4px

    .approveTokenSpendTokenSymbol
      text-transform uppercase
      font-weight 300
      letter-spacing 3px
      display block

    .approveTokenSpendTokenContract
      font-family 'FiraCode'
      position relative
      top 2px
      font-size 13px
      cursor pointer
      display none

  .approveTokenSpendToken:hover
    .approveTokenSpendTokenSymbol
      display none

    .approveTokenSpendTokenContract
      display block
      

  .approveTokenSpendTokenName
    font-weight 300
    font-size 12px
    margin-top 4px
    margin-left 1px
    text-transform uppercase
    letter-spacing 2px
    color var(--good)

.approveTokenSpendAmount
  // background blue // var(--ghostB)
  height 80px
  padding-bottom 10px
  width 100%
  // border-radius 20px
  // padding-top 2px
  // padding-right 100px
  // padding-left 10px
  box-sizing border-box
  position relative
  overflow hidden
  font-weight 400

  .approveTokenSpendAmountLabel
    position absolute
    left 0
    top 0
    bottom 12px
    display flex
    justify-content center
    align-items center
    padding-left 20px
    font-size 16px
    color var(--good)

  @keyframes land
    0%
      transform scale(1.4)
    100%
      transform scale(1)

  .approveTokenSpendAmountSubmit
    position absolute
    right 0
    top 0
    bottom 10px
    display flex
    justify-content center
    align-items center
    padding-right 20px
    padding-left 16px
    font-size 10px
    font-weight 500
    text-transform uppercase
    color var(--moon)
    cursor pointer
    z-index 2000
    animation land 0.5s ease-in-out
    *
      pointer-events none !important

  .approveTokenSpendAmountSubmit:hover
    color var(--good)

  .approveTokenSpendAmountSubtitle
    position absolute
    bottom 4px
    left 0
    right 0
    font-size 8px
    display flex
    justify-content center
    align-items center
    text-transform uppercase
    margin-top 4px
    font-weight 500
    z-index 40000
    letter-spacing 1px
    margin-left -1px

  input
    background transparent
    outline 0
    border 0
    text-align center
    width 100%
    height 100%
    color var(--outerspace)
    font-size 20px
    font-family 'FiraCode'
    border-radius 0px
    padding-left 70px
    padding-right 70px

  input:focus, input:hover, input:active
    background transparent

  .approveTokenSpendAmountNoInput
    background transparent
    outline 0
    border 0
    width 100%
    height 100%
    color var(--outerspace)
    font-size 20px
    font-family 'FiraCode'
    font-weight 300
    display flex
    justify-content center
    align-items center
    cursor pointer
    *
      pointer-events none

.approveTokenSpendAmountExit
  transition var(--standardFast)
  transform scale(0.9)
  color var(--good)

.updateTokenApproval
  margin-top 40px

.updateTokenApprovalSubmit
  margin 40px 0px 0px 0px
  padding 10px
  background var(--ghostA)
  text-align center
  height 20px
  border-radius 20px
  cursor pointer

.updateTokenApprovalSubmit:hover
  background var(--ghostB)
